import React, { Component } from "react";
// 组件
import MainLayout from "../../../component/mainLayout/mainLayout";
import { InputItem, Button } from "antd-mobile";
import AgreeCheckbox from "../../../component/agreeCheckbox/index";

import { connect } from "react-redux";
import { createForm } from "rc-form";

import yhTools from "../../../tools/yh";

import "./index.scss";

/**
 * 身份核实页面
 * by--zenghq
 */
@createForm()
@connect(state => ({
	authHeader: state.getAppPlatformsDatas.authHeaderStr
}))
class IdentityVerification extends Component {
	constructor(props) {
		super(props);
		this.state = {
			mobilePhone: false // 是否同意协议
		};
		this.mobilePhone = ""; // 合同电话
		this.signDate = ""; // 合同签署日期
		this.userName = ""; // 用户名
		this.idNo = ""; // 身份证号
	}
	/*******************生命周期 start************************/
	componentDidMount = () => {
		let { userName = "", idNo = "", mobilePhone = "", signDate = "" } =
			this.props.location.state || {};
		this.mobilePhone = mobilePhone;
		this.signDate = signDate;
		this.userName = yhTools.handelInfo(userName, 0, 1);
		this.idNo = this.formatId(idNo);
		const { setFieldsValue } = this.props.form;

		// 更新初始化数据
		setFieldsValue({
			userName: this.userName,
			idNo: this.idNo
		});
	};
	componentWillUnmount = () => {};
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	/**开始跳转人脸页面 */
	startLive() {
		this.props.history.replace(`/xhbLiveness`);
	}
	formatId = idNo =>
		idNo.substring(0, 1) +
		"***** ******** ***" +
		idNo.substring(idNo.length - 1);
	/*******************业务方法 end************************/
	/*******************点击事件 start************************/
	/**协议点击 */
	handleAgree() {
		let { isAgree } = this.state;
		this.setState({
			isAgree: !isAgree
		});
	}
	/**下一步点击 */
	handleNext() {
		this.startLive();
	}
	/**协议点击 */
	checkAgreement = e => {
		e.stopPropagation();
		this.props.history.push({
			pathname: "/lcService",
			params: {
				userName: this.userName,
				idNo: this.idNo,
				mobilePhone: this.mobilePhone,
				signDate: this.signDate
			}
		});
	};
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const _pageParams = {
			header: {
				title: "身份核实"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const { getFieldProps } = this.props.form;
		const { isAgree } = this.state;
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="id_verifica-box">
					<section className="content-box">
						<div className="title">Hello～</div>
						<div className="sub_title">
							欢迎回来，我们发现您已经在永辉金融开通银行电子账户
						</div>
						<div className="tip">请确认您的身份信息</div>
						<div className="input-box">
							<div className="input_title">姓名</div>
							<InputItem
								editable={false}
								placeholder="请输入姓名"
								{...getFieldProps("userName")}
								className="input"
							></InputItem>
						</div>
						<div className="input-box">
							<div className="input_title">身份证号</div>
							<InputItem
								editable={false}
								placeholder="请输入身份证号码"
								{...getFieldProps("idNo")}
								className="input"
							></InputItem>
						</div>
						<div className="agree-box">
							<AgreeCheckbox
								checked={isAgree}
								onChange={this.handleAgree.bind(this)}
							>
								<React.Fragment>
									<div className="xy-text-box">
										我已阅读并同意
										<a
											className="font-link"
											onClick={this.checkAgreement.bind(this)}
										>
											《永辉金融理财服务协议》
										</a>
										，并授权永辉金融将我在永辉所有财富渠道的资产信息同步至当前关联账号下
									</div>
								</React.Fragment>
							</AgreeCheckbox>
						</div>
						<Button
							onClick={this.handleNext.bind(this)}
							disabled={!isAgree}
							type="primary"
							className="butt"
						>
							下一步
						</Button>
					</section>
				</div>
			</MainLayout>
		);
	}
}

export default IdentityVerification;
